<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.nav {
				margin-left: 30px;

			}

			.nav span {
				/* margin-left:20px; */
				/* padding-left: 20px; */
				/* padding: 上 右 下 左; */
				/* padding: 上下 左右; */
				/* background-color: #5F9EA0; */
			}

			.banner {
				background-image: url(banner.jpg);
				width: 100%;
				height: 500px;
				background-size: 100%;
				color: white;
				padding-top: 100px;
			}

			.banner p {
				font-size: 50px;
				margin-top: 0px;
				margin-left: 200px;
			}

			.banner div {
				margin-left: 200px;
				width: 300px;
			}

			.banner b {
				font-size: 40px;
			}
		</style>
	</head>
	<body>
		<!-- 盒子模型：外边距 内边距 边框 内容
		margin padding border content -->
		<!-- 导航 -->


		<div class="nav">
			<span>HOME</span>
			<span>HOME</span>
			<span>HOME</span>
			<span>HOME</span>
			<span>HOME</span>
			<span>HOME</span>
		</div>
		<!-- banner -->
		<div class="banner">

			<p>HANDLCRAFTS</p>
			<div id="">
				Lapeyrouse Adults trained the young in the
				knoledge and skils inFashion Elle
				Moscow,Russia Form
				<b>$50</b>
			</div>
		</div>
		<!-- products -->
		<style type="text/css">
			.products {
				border: 1px solid #000000;
				width: 80%;
				margin-left: 10%;
				height: 420px;
			}

			.item {
				width: 24%;
				float: left;
				margin-left: 0.7%;
				margin-top: 1%;
				/* 浮动 使元素在水平方向排列 加上浮动后元素会脱离文档流*/
			}

			.item img {
				width: 100%;
			}
		</style>
		<div class="products">
			<div class="item">
				<img src="../css动画/img/1.png">
				<h3>Sed ut perspicatis unde</h3>
				<p>Adults trained the young in
					the knowledge and skills
					Lapeyrouse inFashion Elle
					Moscow,Russla</p>
			</div>
			<div class="item">
				<img src="../css动画/img/1.png">
				<h3>Sed ut perspicatis unde</h3>
				<p>Adults trained the young in
					the knowledge and skills
					Lapeyrouse inFashion Elle
					Moscow,Russla</p>
			</div>
			<div class="item">
				<img src="../css动画/img/1.png">
				<h3>Sed ut perspicatis unde</h3>
				<p>Adults trained the young in
					the knowledge and skills
					Lapeyrouse inFashion Elle
					Moscow,Russla</p>
			</div>
			<div class="item">
				<img src="../css动画/img/1.png">
				<h3>Sed ut perspicatis unde</h3>
				<p>Adults trained the young in
					the knowledge and skills
					Lapeyrouse inFashion Elle
					Moscow,Russla</p>
			</div>
		</div>
	</body>
</html>
